<template>
    <div
        :id="id"
        :class="className"
        :style="{ height: height, width: width }"
    />
</template>

<script>
import echarts from "echarts";
import resize from "./mixins/resize";

export default {
    mixins: [resize],
    props: {
        className: {
            type: String,
            default: "chart"
        },
        id: {
            type: String,
            default: "chart"
        },
        width: {
            type: String,
            default: "200px"
        },
        height: {
            type: String,
            default: "200px"
        }
    },
    data() {
        return {
            chart: null
        };
    },
    mounted() {
        this.initChart();
    },
    beforeDestroy() {
        if (!this.chart) {
            return;
        }
        this.chart.dispose();
        this.chart = null;
    },
    methods: {
        initChart() {
            this.chart = echarts.init(document.getElementById(this.id));
            const xData = (function() {
                const data = [];
                for (let i = 1; i < 13; i++) {
                    data.push(i + "month");
                }
                return data;
            })();
            this.chart.setOption({
                backgroundColor: "#344b58",
                title: {
                    text: "statistics",
                    x: "20",
                    top: "20",
                    textStyle: {
                        color: "#fff",
                        fontSize: "22"
                    },
                    subtextStyle: {
                        color: "#90979c",
                        fontSize: "16"
                    }
                },
                tooltip: {
                    trigger: "axis",
                    axisPointer: {
                        textStyle: {
                            color: "#fff"
                        }
                    }
                },
                grid: {
                    left: "5%",
                    right: "5%",
                    borderWidth: 0,
                    top: 150,
                    bottom: 95,
                    textStyle: {
                        color: "#fff"
                    }
                },
                legend: {
                    x: "5%",
                    top: "10%",
                    textStyle: {
                        color: "#90979c"
                    },
                    data: ["female", "male", "average"]
                },
                calculable: true,
                xAxis: [
                    {
                        type: "category",
                        axisLine: {
                            lineStyle: {
                                color: "#90979c"
                            }
                        },
                        splitLine: {
                            show: false
                        },
                        axisTick: {
                            show: false
                        },
                        splitArea: {
                            show: false
                        },
                        axisLabel: {
                            interval: 0
                        },
                        data: xData
                    }
                ],
                yAxis: [
                    {
                        type: "value",
                        splitLine: {
                            show: false
                        },
                        axisLine: {
                            lineStyle: {
                                color: "#90979c"
                            }
                        },
                        axisTick: {
                            show: false
                        },
                        axisLabel: {
                            interval: 0
                        },
                        splitArea: {
                            show: false
                        }
                    }
                ],
                dataZoom: [
                    {
                        show: true,
                        height: 30,
                        xAxisIndex: [0],
                        bottom: 30,
                        start: 10,
                        end: 80,
                        handleIcon:
                            "path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z",
                        handleSize: "110%",
                        handleStyle: {
                            color: "#d3dee5"
                        },
                        textStyle: {
                            color: "#fff"
                        },
                        borderColor: "#90979c"
                    },
                    {
                        type: "inside",
                        show: true,
                        height: 15,
                        start: 1,
                        end: 35
                    }
                ],
                series: [
                    {
                        name: "female",
                        type: "bar",
                        stack: "total",
                        barMaxWidth: 35,
                        barGap: "10%",
                        itemStyle: {
                            normal: {
                                color: "rgba(255,144,128,1)",
                                label: {
                                    show: true,
                                    textStyle: {
                                        color: "#fff"
                                    },
                                    position: "insideTop",
                                    formatter(p) {
                                        return p.value > 0 ? p.value : "";
                                    }
                                }
                            }
                        },
                        data: [
                            709,
                            1917,
                            2455,
                            2610,
                            1719,
                            1433,
                            1544,
                            3285,
                            5208,
                            3372,
                            2484,
                            4078
                        ]
                    },

                    {
                        name: "male",
                        type: "bar",
                        stack: "total",
                        itemStyle: {
                            normal: {
                                color: "rgba(0,191,183,1)",
                                barBorderRadius: 0,
                                label: {
                                    show: true,
                                    position: "top",
                                    formatter(p) {
                                        return p.value > 0 ? p.value : "";
                                    }
                                }
                            }
                        },
                        data: [
                            327,
                            1776,
                            507,
                            1200,
                            800,
                            482,
                            204,
                            1390,
                            1001,
                            951,
                            381,
                            220
                        ]
                    },
                    {
                        name: "average",
                        type: "line",
                        stack: "total",
                        symbolSize: 10,
                        symbol: "circle",
                        itemStyle: {
                            normal: {
                                color: "rgba(252,230,48,1)",
                                barBorderRadius: 0,
                                label: {
                                    show: true,
                                    position: "top",
                                    formatter(p) {
                                        return p.value > 0 ? p.value : "";
                                    }
                                }
                            }
                        },
                        data: [
                            1036,
                            3693,
                            2962,
                            3810,
                            2519,
                            1915,
                            1748,
                            4675,
                            6209,
                            4323,
                            2865,
                            4298
                        ]
                    }
                ]
            });
        }
    }
};
</script>
